﻿@page "/" 

@inject ApiHelper apiHelper
@{
    ViewBag.CurrentNavigate = "/";
    ViewData["title"] = L["home"];
    Models.SiteInfoModel siteInfo = await apiHelper.GetSiteInfoAsync();

    var servicesData=await apiHelper.GetSettingsListAsync("services");
    var chooseUsData = await apiHelper.GetSettingsListAsync("Why Choose Us");
    var news = await apiHelper.PageArticleByTagAsync(1, 3, "news");
    var newsData = news.Items ?? new List<ArticleItemModel>();

    var data1 = await apiHelper.GetSettingsListAsync("data1");
    var priceData1 = await apiHelper.GetSettingsListAsync("pricing1");
    var priceData2 = await apiHelper.GetSettingsListAsync("pricing2");
    var priceData3 = await apiHelper.GetSettingsListAsync("pricing3");
    var reviewsData = await apiHelper.GetSettingsListAsync("reviews");
    var culture = Request.Query["culture"].ToString();
    culture = string.IsNullOrWhiteSpace(culture) ? "zh-CN" : culture;
    ViewData["culture"] = culture;
     
}


<div class="section-bgc intro">
    <div class="intro-slider">
        <div class="intro-item" style="background-image: url(public/img/intro-img1.jpg);">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <div class="intro-content">
                            <div class="section-heading shm-none">
                                <div class="section-subheading">Free template</div>
                                <h1>@siteInfo.Title</h1>
                                <p class="section-desc">@siteInfo.Description</p>
                            </div>
                            <div class="wrap-btn intro-btns">
                                <a href="#" class="btn btn-with-icon btn-small ripple">
                                    <span>@L["Buy premium"]</span>
                                    <svg class="btn-icon-right" viewBox="0 0 13 9" width="13" height="9"><use xlink:href="public/img/sprite.svg#arrow-right"></use></svg>
                                </a>
                                <a href="#" class="btn btn-with-icon btn-border btn-small ripple">
                                    <span>@L["Get in Touch"]</span>
                                    <svg class="btn-icon-right" viewBox="0 0 13 9" width="13" height="9"><use xlink:href="public/img/sprite.svg#arrow-right"></use></svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><!-- End intro -->
<!-- Begin services -->
<section class="section services">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="section-heading heading-center">
                    <div class="section-subheading">@L["Areas what we serv"]</div>
                    <h2>@L["Our Services"]</h2>
                </div>
            </div>
            @{
                var serviceItemIndex = 0; var serviceItemName = "corporate_fare";
            }
            @foreach (var item in servicesData)
            {
                if (serviceItemIndex == 1) serviceItemName = "support_agent";
                if (serviceItemIndex == 2) serviceItemName = "cloud_download";
                <div class="col-lg-4 col-md-6 col-12 item">
                    <a href="single-services.html" class="iitem item-style">
                        <div class="iitem-icon">
                            <i class="material-icons material-icons-outlined md-48">@serviceItemName</i>
                        </div>
                        <div class="iitem-icon-bg">
                            <i class="material-icons material-icons-outlined">@serviceItemName</i>
                        </div>
                        <h3 class="iitem-heading item-heading-large">@item.Key</h3>
                        <div class="iitem-desc">@item.Value</div>
                    </a>
                </div>
                    serviceItemIndex++;
            }
           
            <div class="col-12">
                <div class="section-btns justify-content-center">
                    <a href="/services" class="btn btn-with-icon btn-w240 ripple">
                        <span>@L["See All Services"]</span>
                        <svg class="btn-icon-right" viewBox="0 0 13 9" width="13" height="9"><use xlink:href="public/img/sprite.svg#arrow-right"></use></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section><!-- End services -->
<!-- Begin advantages -->
<section class="section section-bgc">
    <div class="container">
        <div class="row items">
            <div class="col-12">
                <div class="section-heading heading-center">
                    <div class="section-subheading">some reasons</div>
                    <h2>@L["Why Choose Us"]</h2>
                </div>
            </div>
            @{
                var m = 1;
            }
            @foreach (var item in chooseUsData)
            {
                <div class="col-lg-4 col-md-6 col-12 item">
                    <div class="ini">
                        <div class="ini-count">@("0"+m)</div>
                        <div class="ini-info">
                            <h3 class="ini-heading item-heading-large">@item.Key</h3>
                            <div class="ini-desc">
                                <p>@item.Value</p>
                            </div>
                        </div>
                    </div>
                </div>
                m++;
            }
            
        </div>
    </div>
</section><!-- End advantages -->
<!-- Begin counter section -->
<section class="section">
    <div class="container">
        <div class="row spincrement-container">
            <div class="col-xl-5 offset-xl-2 col-lg-6 offset-lg-1 col-12">
                <div class="main-counter">
                    <div class="main-counter-item">
                        <div class="main-counter-item-center">
                            <div>
                                <div class="main-counter-numb spincrement" data-from="0" data-to="@data1[0].Value">0</div>
                                <div class="main-counter-heading">Years <br> Of Experience</div>
                            </div>
                        </div>
                        <div class="main-counter-item-circ"></div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 offset-xl-1 col-lg-3 offset-lg-1 col-12 counter-items items">
                <div class="counter-item item">
                    <div class="counter-item-numb"><span class="spincrement" data-from="0" data-to="@data1[1].Value">0</span>K</div>
                    <p class="counter-item-heading">@data1[1].Key</p>
                </div>
                <div class="counter-item item">
                    <div class="counter-item-numb spincrement" data-from="0" data-to="@data1[2].Value">0</div>
                    <p class="counter-item-heading">@data1[2].Key</p>
                </div>
                <div class="counter-item item">
                    <div class="counter-item-numb spincrement" data-from="0" data-to="@data1[3].Value">0</div>
                    <p class="counter-item-heading">@data1[3].Key</p>
                </div>
            </div>
        </div>
    </div>
</section><!-- End counter section -->
@if (priceData1.Length > 0 || priceData2.Length > 0 || priceData3.Length > 0)
{
    <div class="section section-bgc">
        <div class="container">
            <div class="row items">
                <div class="col-12">
                    <div class="section-heading heading-center">
                        <div class="section-subheading">Our prices</div>
                        <h1>Pricing</h1>
                    </div>
                </div>

                @if (priceData1.Length > 0)
                {
                    <div class="col-lg-4 col-md-6 col-12 item">
                        <!-- Begin pricing item -->

                        <div class="pricing-item item-style">
                            <header class="pricing-item-header">
                                <div class="pricing-item-heading">@priceData1[0].Key</div>
                                <div class="pricing-item-price"><small>from</small> @priceData1[0].Value</div>
                            </header>
                            <div class="pricing-item-h">
                                <div class="pricing-item-content">
                                    <ul class="pricing-item-list">
                                        @if (priceData1 != null)
                                        {
                                            foreach (var item in priceData1)
                                            {
                                                if (priceData1.First() == item) continue;
                                                <li class="active">
                                                    @if (Convert.ToBoolean( item.Value))
                                                    {
                                                        <i class="material-icons md-24">check</i>
                                                    }
                                                    @item.Key
                                                </li>
                                            }
                                        }

                                    </ul>
                                </div>
                                <footer class="pricing-item-footer">
                                    <a href="#!" class="btn btn-large btn-with-icon btn-wide ripple">
                                        <span>Get Starter</span>
                                        <svg class="btn-icon-right" viewBox="0 0 13 9" width="13" height="9"><use xlink:href="public/img/sprite.svg#arrow-right"></use></svg>
                                    </a>
                                </footer>
                            </div>
                        </div><!-- End pricing item -->
                    </div>
                }


                @if (priceData2.Length > 0)
                {
                    <div class="col-lg-4 col-md-6 col-12 item">
                        <!-- Begin pricing item -->

                        <div class="pricing-item item-style">
                            <div class="pricing-item-badge">Popular</div>
                            <header class="pricing-item-header">
                                <div class="pricing-item-heading">@priceData2[0]?.Key</div>
                                <div class="pricing-item-price"><small>from</small> @priceData2[0].Value</div>
                            </header>
                            <div class="pricing-item-h">
                                <div class="pricing-item-content">
                                    <ul class="pricing-item-list">
                                        @if (priceData2 != null)
                                        {
                                            foreach (var item in priceData2)
                                            {
                                                if (priceData2.First() == item) continue;
                                                <li class="active">
                                                    @if (Convert.ToBoolean(item.Value))
                                                    {
                                                        <i class="material-icons md-24">check</i>
                                                    }
                                                    @item.Key
                                                </li>
                                            }
                                        }
                                    </ul>
                                </div>
                                <footer class="pricing-item-footer">
                                    <a href="#!" class="btn btn-border btn-large btn-with-icon btn-wide ripple">
                                        <span>Get Starter</span>
                                        <svg class="btn-icon-right" viewBox="0 0 13 9" width="13" height="9"><use xlink:href="public/img/sprite.svg#arrow-right"></use></svg>
                                    </a>
                                </footer>
                            </div>
                        </div><!-- End pricing item -->
                    </div>
                }

                @if (priceData3.Length > 0)
                {
                    <div class="col-lg-4 col-md-12 col-12 item">
                        <!-- Begin pricing item -->

                        <div class="pricing-item item-style">
                            <header class="pricing-item-header">
                                <div class="pricing-item-heading">@priceData3[0]?.Key</div>
                                <div class="pricing-item-price"><small>from</small>@priceData3[0].Value</div>
                            </header>
                            <div class="pricing-item-h">
                                <div class="pricing-item-content">
                                    <ul class="pricing-item-list">
                                        @if (priceData3 != null)
                                        {
                                            foreach (var item in priceData3)
                                            {
                                                if (priceData3.First() == item) continue;
                                                <li class="active">
                                                    @if (Convert.ToBoolean(item.Value))
                                                    {
                                                        <i class="material-icons md-24">check</i>
                                                    }
                                                    @item.Key
                                                </li>
                                            }
                                        }
                                    </ul>
                                </div>
                                <footer class="pricing-item-footer">
                                    <a href="#!" class="btn btn-large btn-with-icon btn-wide ripple">
                                        <span>Get Starter</span>
                                        <svg class="btn-icon-right" viewBox="0 0 13 9" width="13" height="9"><use xlink:href="public/img/sprite.svg#arrow-right"></use></svg>
                                    </a>
                                </footer>
                            </div>
                        </div><!-- End pricing item -->
                    </div>
                }

            </div>
        </div>
    </div>
}


<!-- Begin reviews -->
@if (reviewsData!=null&&reviewsData[0].Value.Contains("{"))
{
    <section class="section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-heading heading-center">
                        <div class="section-subheading">Reviews from our clients</div>
                        <h2>What People Say</h2>
                    </div>
                </div>

                @{
                    var reviewsList = System.Text.Json.JsonSerializer.Deserialize<ReviewDto[]>(reviewsData[0].Value);
                }
                @if (reviewsList != null)
                {
                    foreach (var item in reviewsList)
                    {
                        <div class="col-lg-4 col-md-6 col-12 item">
                            <!-- Begin reviews item -->
                            <div class="reviews-item item-style">
                                <div class="reviews-item-header">
                                    <div class="reviews-item-img">
                                        <img data-src="@item.Avatar" class="lazy" src="@item.Avatar" alt="">
                                    </div>
                                    <div class="reviews-item-info">
                                        <h4 class="reviews-item-name item-heading">@item.Name</h4>
                                        <div class="reviews-item-position">@item.Nick</div>
                                    </div>
                                </div>
                                <div class="reviews-item-text">
                                    <p>@item.Description</p>
                                </div>
                            </div><!-- End reviews item -->
                        </div>
                    }
                }
                
        </div>
    </div>
    </section>
}<!-- End reviews -->

<!-- Begin latest news -->
<section class="section section-bgc">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="section-heading heading-center">
                    <div class="section-subheading">More info about</div>
                    <h2>Latest News</h2>
                </div>
            </div>
            @foreach (var item in newsData)
            {
                <div class="col-lg-4 col-md-6 col-12 item">
                    <!-- Begin news item -->
                    <article class="news-item item-style">
                        <a href="news-post.html" class="news-item-img">
                            <img data-src="@item.FeatureImage" class="lazy" src="@item.FeatureImage" alt="">
                        </a>
                        <div class="news-item-info">
                            <div class="news-item-date">@item.CreatedAt.ToString("yyyy-MM-dd")</div>
                            <h3 class="news-item-heading item-heading">
                                <a href="/posts/@item.Id" title="@item.Title">@item.Title</a>
                            </h3>
                            <div class="news-item-desc">
                                <p>@item.posts_metas?.FirstOrDefault()?.MetaDescription</p>
                            </div>
                        </div>
                    </article><!-- End news item -->
                </div>
            }
            
       
            <div class="col-12">
                <div class="section-btns justify-content-center">
                    <a href="/news" class="btn btn-with-icon btn-w240 ripple">
                        <span>See All News</span>
                        <svg class="btn-icon-right" viewBox="0 0 13 9" width="13" height="9"><use xlink:href="public/img/sprite.svg#arrow-right"></use></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section><!-- End latest news -->

@section css
{
    <style>
        main {
            margin: auto;
            padding: 1rem;
            width: 800px;
            max-width: calc(100% - 2rem);
            color: white;
            font-size: 20px;
            line-height: 1.6;
        }

        .astro-a {
            position: absolute;
            top: -32px;
            left: 50%;
            transform: translatex(-50%);
            width: 220px;
            height: auto;
            z-index: -1;
        }

        h1 {
            font-size: 4rem;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            margin-bottom: 1em;
        }

        .text-gradient {
            background-image: var(--accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 400%;
            background-position: 0%;
        }

        .instructions {
            margin-bottom: 2rem;
            border: 1px solid rgba(var(--accent-light), 25%);
            background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
            padding: 1.5rem;
            border-radius: 8px;
        }

            .instructions code {
                font-size: 0.8em;
                font-weight: bold;
                background: rgba(var(--accent-light), 12%);
                color: rgb(var(--accent-light));
                border-radius: 4px;
                padding: 0.3em 0.4em;
            }

            .instructions strong {
                color: rgb(var(--accent-light));
            }

        .link-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
            gap: 2rem;
            padding: 0;
        }
    </style>

}